<!DOCTYPE html>
<html>

	<head>
		<title>WMTS example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
					<input type="button" name="export" id="export" value="export" />
				</div>
			</div>

		</div>
		<script>
			var projection = ol.proj.get('EPSG:3857');
			var projectionExtent = projection.getExtent();
			var size = ol.extent.getWidth(projectionExtent) / 256;
			var resolutions = new Array(19);
			var matrixIds = new Array(19);
			for (var z = 0; z < 19; ++z) {
				// generate resolutions and matrixIds arrays for this WMTS
				resolutions[z] = size / Math.pow(2, z);
				matrixIds[z] = z;
			}
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.WMTS({
							crossOrigin:"Anonymous",
							url: ' http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS',
							matrixSet: 'GoogleMapsCompatible',
							format: 'image/png',
							tileGrid: new ol.tilegrid.WMTS({
								origin: ol.extent.getTopLeft(projectionExtent),
								resolutions: resolutions,
								matrixIds: matrixIds
							}),
							style: 'default',
							wrapX: true
						})
					})
				],
				target: 'map',
				controls: ol.control.defaults({
					attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
						collapsible: false
					})
				}),
				view: new ol.View({
					center: [0, 0],
					zoom: 4
				})
			});
			$("#export").click(function(){
				map.once('postcompose', function(event) {
					var canvas = event.context.canvas;
					var image = canvas.toDataURL('image/png');
					console.log(image);
				});
				map.renderSync();
			});
			
		</script>
	</body>

</html>